<template>
  <div class="app-container  bg-gray">
    <el-row class="box-1">
      <el-col :span="24">
        <el-card>
          <div class="header">
            <div>
              <el-select v-model="searchTerms.status" placeholder="腾讯云权限" @change="getData">
                <el-option :value="1" label="已开启"/>
                <el-option :value="0" label="已关闭"/>
              </el-select>
              <el-input v-model="searchTerms.min_balance" placeholder="资金起点" class="balance-input1" @change="getData"/>
              <div class="balance-text">-</div>
              <el-input v-model="searchTerms.max_balance" placeholder="资金终点" class="balance-input2" @change="getData"/>
              <el-input v-model="searchTerms.searchValue" placeholder="请输入用户昵称" class="search-input" @change="getData"/>
              <el-button type="success" class="do-btn" icon="el-icon-search" @click="getData">搜索</el-button>
              <div class="flex-1"/>
              <column-controller :check-items="th" class="controller" @change="columnCheck"/>
            </div>
          </div>
          <el-table v-loading="tableLoading" :data="tableData" :max-height="tableMaxHeight" border highlight-current-row
                    @sort-change="handleSortChange">
            <el-table-column prop="id" label="ID" min-width="70" header-align="center" align="center" sortable/>
            <el-table-column v-if="th[1].check" prop="name" label="用户昵称" min-width="90" header-align="center"
                             align="center">
              <template slot-scope="scope">
                {{ scope.row.name?scope.row.name:'--' }}
                <span class="remarks">{{ scope.row.remarks }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="th[2].check" prop="realname" label="真实名" min-width="100" header-align="center"
                             align="center"/>
            <el-table-column v-if="th[3].check" prop="mobile" label="手机" min-width="100" header-align="center"
                             align="center"/>
            <el-table-column prop="discount" label="新拓客户" min-width="130" header-align="center">
              <template slot-scope="scope">
                <div>折扣：{{ scope.row['tencent_discount']?(scope.row['tencent_discount']+'%'):'100%' }}</div>
                <div>限额：{{ scope.row['quota']?scope.row['quota']:'--' }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="discount" label="存量客户" min-width="130" header-align="center">
              <template slot-scope="scope">
                <div>折扣：{{ scope.row['tencent_old_discount']?(scope.row['tencent_old_discount']+'%'):'100%' }}</div>
                <div>限额：{{ scope.row['old_quota']?scope.row['old_quota']:'--' }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="discount" label="指派客户" min-width="130" header-align="center">
              <template slot-scope="scope">
                <div>折扣：{{ scope.row['tencent_assign_discount']?(scope.row['tencent_assign_discount']+'%'):'100%' }}
                </div>
                <div>限额：{{ scope.row['assign_quota']?scope.row['assign_quota']:'--' }}</div>
              </template>
            </el-table-column>
            <el-table-column v-if="th[5].check" prop="company" label="公司" min-width="160" header-align="center"
                             align="center">
              <template slot-scope="scope">
                {{ scope.row.company?scope.row.company:'--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="th[6].check" prop="balance" label="资金" min-width="100" header-align="center"
                             align="center" sortable>
              <template slot-scope="scope">
                <div @click="showMoneyChange(scope.row, '资金')">
                  <el-tag type="primary">{{ scope.row.balance }}</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-if="th[7].check" prop="admin_name" label="跟进人" min-width="100" header-align="center"
                             align="center"/>
            <el-table-column v-if="th[8].check" prop="create_time" label="注册时间" min-width="130" header-align="center"
                             align="center" sortable>
              <template slot-scope="scope">
                {{ scope.row.create_time?parseTime(scope.row.create_time, '{y}-{m}-{d}'):'--' }}
              </template>
            </el-table-column>
            <el-table-column label="腾讯云权限" min-width="120" header-align="center" align="center" fixed="right">
              <template slot-scope="scope">
                <div @click="setState(scope.row)">
                  <el-tag :type="scope.row['tencent_status']==0?'danger':'success'">{{ scope.row['tencent_status']==0?'已关闭':'已开启' }}
                  </el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="160" header-align="center" align="center" fixed="right">
              <template slot-scope="scope">
                <!--<el-button v-if="queryMatch(31)" type="info" size="small" icon="el-icon-edit" @click="showDiscountChangeDialog(scope.row)" >支付设置</el-button>-->
                <el-button type="info" size="small" icon="el-icon-edit" @click="showDiscountChangeDialog(scope.row)">
                  支付设置
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :total="total"
            class="pagination"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"/>
        </el-card>
      </el-col>
    </el-row>
    <!--修改客户折扣弹窗-->
    <el-dialog :visible.sync="discountDialogVisible" title="支付设置" width="480px" class="dialog" center
               @close="resetDiscountChangeDialog('form')">
      <el-form ref="form" :model="form" label-width="90px">
        <el-divider content-position="left">新拓客户</el-divider>
        <el-form-item label="折扣(%)">
          <el-input v-model="form.tencent_discount" type="number"/>
        </el-form-item>
        <el-form-item label="单笔支付限额">
          <el-input v-model="form.quota" type="number" placeholder="请输入单笔限额"/>
        </el-form-item>
        <el-form-item/>
        <el-divider content-position="left">存量客户</el-divider>
        <el-form-item label="折扣(%)">
          <el-input v-model="form.tencent_old_discount" type="number"/>
        </el-form-item>
        <el-form-item label="单笔支付限额">
          <el-input v-model="form.old_quota" type="number" placeholder="请输入单笔限额"/>
        </el-form-item>
        <el-form-item/>
        <el-divider content-position="left">指派客户</el-divider>
        <el-form-item label="折扣(%)">
          <el-input v-model="form.tencent_assign_discount" type="number"/>
        </el-form-item>
        <el-form-item label="单笔支付限额">
          <el-input v-model="form.assign_quota" type="number" placeholder="请输入单笔限额"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="discountDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDiscountChange('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {ColumnController} from '../../../components'
  import {handleSortChange, handleSizeChange, handleCurrentChange, columnCheck, parseTime} from '@/utils/table'

  export default {
    components: {ColumnController},
    data() {
      return {
        searchTerms: {
          status: 1,
          min_balance: '',
          max_balance: '',
          searchValue: ''
        },

        discountDialogVisible: false,
        form: {
          id: '',
          tencent_discount: 100,
          quota: null,
          tencent_old_discount: 100,
          old_quota: null,
          tencent_assign_discount: 100,
          assign_quota: null
        },

        // 表格相关数据
        tableMaxHeight: document.documentElement.clientHeight - 300,
        th: [{name: '头像', check: true},
          {name: '用户名', check: true},
          {name: '真实名', check: true},
          {name: '手机', check: true},
          {name: '用户等级', check: true},
          {name: '公司', check: true},
          {name: '资金', check: true},
          {name: '跟进人', check: true},
          {name: '注册时间', check: true}],
        tableLoading: false,
        currentPage: 1,
        pageSize: this.$store.getters.userInfo.pageSize,
        pageSizes: [10, 20, 50, 100, 1000],
        total: 0,
        tableData: []
      }
    },

    created() {
      this.getData()
    },

    methods: {
      handleCurrentChange, handleSizeChange, handleSortChange, columnCheck, parseTime,
      getData(order) {
        this.tableLoading = true
        order || (order = {})
        const url = 'member/list'
        const data = {
          page_no: this.currentPage,
          page_size: this.pageSize,
          search: this.searchTerms.searchValue,
          tencent_status: this.searchTerms.status,
          min_balance: this.searchTerms.min_balance,
          max_balance: this.searchTerms.max_balance
        }
        order.sortName && (data.sortName = order.sortName)
        order.sortOrder && (data.sortOrder = order.sortOrder)
        this.$store.dispatch('GetConnect', {url, data}).then(res => {
          this.tableData = res.data.rows
          this.total = res.data.total
          this.tableLoading = false
        }).catch(e => {
          this.tableLoading = false
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },

      /**
       * 修改选择客户的折扣
       */
      showDiscountChangeDialog(row) {
        this.discountDialogVisible = true
        this.form['id'] = row.id
        Object.assign(this.form, row)
      },
      submitDiscountChange(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const data = this.form
            if (!this.form.tencent_discount || this.form.tencent_discount === '' || this.form.tencent_discount === null) {
              this.$message.error('提交失败,请输入折扣')
              return
            }
            const url = 'tencent/updateDiscount?id=' + this.form.id
            this.$store.dispatch('GetConnect', {url, data}).then(res => {
              this.$message.success(res.msg)
              this.getData()
              this.discountDialogVisible = false
            }).catch((err) => {
              this.$message.error(err.msg)
            })
          } else {
            this.$message.error('提交失败,请检查必填项')
          }
        })
      },
      resetDiscountChangeDialog(formName) {
        this.$refs[formName].resetFields()
      },

      /**
       * 设置当前用户的状态
       * row: 当前点击的行的数据
       */
      setState(row) {
        row['tencent_status'] = (row['tencent_status'] === 0 ? 1 : 0)
        const url = 'tencent/tencentStatus?id=' + row.id
        const data = {status: row['tencent_status']}
        this.$store.dispatch('GetConnect', {url, data}).then(res => {
          this.$message.success('修改用户状态成功，状态：' + (row['tencent_status'] === 1 ? '已开启' : '已关闭'))
        }).catch(e => {
          row['tencent_status'] = row['tencent_status'] === 0 ? 1 : 0
          this.$message.error('修改用户状态失败，请刷新或联系管理员')
        })
      },

      /**
       * 跳转用户修改页面
       * title: 新增/修改
       * row: 当前点击的行的数据,为空时为新增
       */
      toModify(title, row) {
        this.isShow = false
        const query = {title: title}
        row && (query.id = row.id)
        this.$router.push({
          path: '/user/userlist/modify',
          query: query
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../../styles/index.scss';

  .box-1 {
    .header {
      @include flex-row(center, space-between);
      padding-bottom: 15px;
      flex-wrap: wrap;

      > div {
        @include flex-row(center, flex-start);
        flex-wrap: wrap;
        width: 100%;
      }

      .el-select {
        padding-right: 15px;
        width: 180px;
      }

      .search-input {
        width: 240px;
      }

      .balance-input1 {
        width: 90px;
      }

      .balance-input2 {
        width: 90px;
        margin-right: 15px;
      }

      .balance-text {
        padding: 0 5px;
      }

      .do-btn {
        @extend .bg-green;
        margin-left: 6px;
      }
    }
  }

  .dialog {
    .content {
      text-align: center;
    }
  }

  .el-tag {
    cursor: pointer;
  }

  .remarks {
    font-size: 12px;
    color: $textGray;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 0px;
  }
</style>
